<template>
	<view class="">
		<view class="list" v-if="list.length > 0">

			<view class="item" v-for="(item,index) in list" :key="index">

				<view class="s1" @click="goEdit(item, 2)">
					<image :src="item.images_url[0]" mode="aspectFill"></image>
					<view class="txtImg">
						<view class="c1">{{ item.title ? item.title : item.title }}</view>
						<view class="c2">{{ item.start_time_text }}</view>
					</view>
				</view>

				<view class="s2">
					<view class="c1" @click="goEdit(item, 1)">
						<image src="@/static/icon/edit.png"></image>
					</view>
					<view class="c1" @click="setStatus(item)">
						<image v-if="item.status == 0" src="@/static/icon/down_2.png"></image>
						<image v-else src="@/static/icon/down.png"></image>
					</view>
					<view class="c1" @click="goOrder(item)">
						<view class="text" v-if='item.order_count > 0'>{{ item.order_count }}</view>
						<image src="@/static/icon/detail.png"></image>
					</view>
					<view class="c1" @click="setDel(item)">
						<image src="@/static/icon/del.png"></image>
					</view>
				</view>

			</view>

		</view>

		<view class="empty" v-else>
			<u-empty mode="order" text="活动为空"></u-empty>
		</view>

		<!-- <view class="add" @click="goAdd()">
			<image src="@/static/icon/add.png"></image>
		</view> -->

		<u-toast ref="uToast"></u-toast>

	</view>
</template>

<script>
	import topLogin from '@/components/topLog.vue'
	export default {
		components: {
			topLogin
		},
		data() {
			return {
				list: []
			};
		},
		mounted() {
			this.getList();
		},
		methods: {
			getList() {
				this.$API.getActivityList().then(res => {
					this.list = res.data;
				})
			},
			goInfo(item) {
				uni.navigateTo({
					url: '/pages/activity/info?id=' + item.id
				})
			},
			goAdd() {
				uni.navigateTo({
					url: '/pages/activity/add_activity'
				})
			},
			goEdit(item, type) {
				if (item.status == 1) {
					if (type == 2) {
						sessionStorage.setItem('back', 1)
						uni.navigateTo({
							url: '/pages/activity/info?id=' + item.id
						})
					} else {
						this.$refs.uToast.show({
							type: 'error',
							title: '失败主题',
							message: "活动目前是上线状态，请先下线后再进入编辑",
						});
					}
					return;
				}
				uni.navigateTo({
					url: '/pages/activity/add_activity?id=' + item.id
				})
			},
			setStatus(item) {
				let that = this
				uni.showModal({
					content: '确认' + (item.status == 1 ? '下线' : '上线') + '吗？',
					success: function(res) {
						if (res.confirm) {
							that.$API.setStatus({
								id: item.id
							}).then(res => {
								item.status = item.status == 1 ? 0 : 1;
							})
						}
					}
				})
			},
			setDel(item) {
				let that = this;
				if (item.order_count > 0) {
					uni.showToast({
						title: '活动已有支付订单，不可删除',
						icon: 'none'
					})
					return false;
				}

				uni.showModal({
					content: '确认删除吗？',
					success: function(res) {
						if (res.confirm) {
							that.$API.setDel({
								id: item.id
							}).then(res => {
								uni.showToast({
									title: '删除成功',
									icon: 'none'
								})
								this.page = 1;
								that.getList();
							})
						}
					}
				})
			},
			goOrder(item) {
				uni.navigateTo({
					url: '/pages/activity/order?id=' + item.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.txtImg {
		position: absolute;
		bottom: 0;
		width: 88%;
		padding: 0 6%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100rpx;
		border-radius: 0 0 48rpx 48rpx;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #31353D 100%);


	}

	// .content {
	// 	// min-height: 100vh;
	// 	// margin: 0 36rpx;
	// 	padding-bottom: 36rpx;
	// 	@include flex(column);


	.title {
		height: 48rpx;
		font-size: 40rpx;
		font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
		font-weight: 600;
		color: #110202;
		line-height: 48rpx;
		margin-top: 36rpx;
	}

	.list {
		@include flex(column);

		.item {
			@include flex(column);
			height: 408rpx;
			background-color: #FFFFFF;
			padding: 16rpx;
			margin-top: 36rpx;
			border-radius: 48rpx;
			box-shadow: 0 12rpx 116rpx 0 rgba(196, 203, 214, 0.10);

			.s1 {
				position: relative;
				width: 100%;
				height: 336rpx;

				image {
					width: 100%;
					height: 336rpx;
					border-radius: 48rpx;
				}

				.c1 {
					margin-bottom: 16rpx;
					height: 32rpx;
					font-size: 32rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 32rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					// mix-blend-mode: difference;
				}

				.c2 {
					height: 24rpx;
					font-size: 24rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 24rpx;
				}
			}

			.s2 {
				@include flex;
				justify-content: space-between;

				.c1 {
					width: 100%;
					height: 35rpx;
					text-align: center;
					margin-top: 28rpx;
					position: relative;

					image {
						width: 30rpx;
						height: 33rpx;
					}

					.text {
						position: absolute;
						left: 50%;
						top: -19rpx;
						height: 28rpx;
						background-color: #FF5B5B;
						font-size: 20rpx;
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 28rpx;
						padding: 0 8rpx;
						border-radius: 20rpx;
					}
				}
			}
		}
	}

	.empty {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.add {
		position: fixed;
		width: 184rpx;
		height: 184rpx;
		right: 16rpx;
		bottom: 370rpx;

		image {
			width: 184rpx;
			height: 184rpx;
		}
	}

	// }
</style>